<template>
  <div>
    <van-nav-bar title="购物车">
      <template #left>
        <van-icon name="arrow-left" />
      </template>
    </van-nav-bar>
    <van-sidebar
      style="float: left; width: 23%"
      v-model="activeKey"
      @change="onChange"
    >
      <van-sidebar-item
        v-for="(item, index) in cateList"
        :key="index"
        :title="item.catename"
      />
    </van-sidebar>

    <van-grid :gutter="10" :column-num="3">
      <van-grid-item
        @click="onChange1(index)"
        style="height: 170px"
        v-for="(item, index) in goodsList"
        :key="index"
        :icon="$host + item.img"
        :text="item.catename"
      />
    </van-grid>

    <van-tabbar v-model="active">
      <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/cate" icon="search">分类</van-tabbar-item>
      <van-tabbar-item to="/shopcar" icon="friends-o">购物车</van-tabbar-item>
      <van-tabbar-item to="/loginno" icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  created() {
    this.$http.get("/getcate").then((res) => {
      this.cateList = res.data.list;

      this.$http.get("/getcate").then((res) => {
        this.goodsList = this.cateList[0].children;
      });
    });
  },
  methods: {
    onChange(index) {
      this.$http.get("/getcate").then((res) => {
        this.goodsList = this.cateList[index].children;
      });
    },
    onChange1(index) {
      console.log(this.goodsList[index].id);
      this.$router.push("cate/" + this.goodsList[index].id);
    },
  },
  data() {
    return {
      cateList: [],
      goodsList: [],
      one: 0,
      active: 1,
      activeKey: 0,
    };
  },
};
</script>
<style lang="">
</style>